<template>
    <div id="vfor">
      <ul>
        <!--新数组语法-->
        <!--value in arr-->
        <!--(value, index) in arr-->

        <!--新对象语法-->
        <!--value in obj -->
        <!--(value, key) in obj-->
        <!--(value, key, index) in obj-->

        <li v-for="(item,index) in list" :key="index">{{ index }}-{{ item }}</li>
        <li v-for="(item,key) in user">{{ key }}-{{ item }}</li>
      </ul>
      <div>
        <br/>
        <br/>
        <label>ID:<input type="text" v-model="id" placeholder="请输入唯一的ID"/></label>
        <label>Name:<input type="text" v-model="name"/></label>
        <input type="button" value="添加" @click="add"/>
        <p v-for="(items,index) in lists" :key="items.id">
          <input type="checkbox"/>
          {{ items.id }}-{{ items.name }}
        </p>
      </div>
    </div>
</template>

<script>
    export default {
        name: "vfor",
      data(){
          return{
            id:"",
            name:"",
            list:[1,2,3,4,5],
            user:{uname:'itcast',age:10},
            lists:[
              {id:1, name:'李斯'},
              {id:2, name:'嬴政'},
              {id:3, name:'赵高'},
              {id:4, name:'韩非'},
              {id:5, name:'荀子'}
            ]
          }
      },
      methods:{
          add(){
            this.lists.unshift({id:this.id,name:this.name});
          }
      }
    }
</script>

<style scoped>

</style>,
